
<template>
  <div class="meterCardForm-wrapper">
    <!-- 计量卡编辑dialog-->
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      v-dialogDrag
      :visible.sync="editVisible"
    >
      <el-form
        :inline="true"
        label-width="127px"
        :rules="dataRule"
        ref="meterCardForm"
        :model="meterCardForm"
        style="position: relative;min-width:704px"
      >
        <div class="first-wrapper">
          <div class="left-wrapper">
            <div class="first-form">
              <el-form-item label="卡序号:" prop="cardNumber">
                <el-input v-model="readCardForm.cardNumber"></el-input>
              </el-form-item>

              <el-form-item label="卡类型:" label-width="118px" prop="cardTypeValue">
                <el-input v-model="readCardForm.cardTypeValue">
                </el-input>
              </el-form-item>
            </div>
            <div class="first-form">
              <el-form-item label="卡内号:" prop="cardInnerNumber">
                <el-input v-model="readCardForm.cardInnerNumber"></el-input>
              </el-form-item>
              <el-form-item label="卡状态:"  label-width="118px" prop="state">
                <el-input v-model="readCardForm.cardStateValue">
                </el-input>
              </el-form-item>
            </div>
          </div>
          <div class="right-wrapper">
            <div class="readBut" @click="readCard">
              读卡
            </div>
          </div>
        </div>
        <div class="second-form">
          <el-form-item class="card-use" label="卡用途:" prop="cardUsage">
              <el-select clearable v-model="meterCardForm.cardUsage" placeholder="请选择"  @change="clearData">
                <el-option
                  v-for="item in  $dictUtils.getDictList('cardUsage')"
                  :key="item.value"
                  :label="item.label"
                  :value="Number(item.value)">
                </el-option>
              </el-select>
          </el-form-item>
        </div>
        <div>
        <div v-if="meterCardForm.cardUsage === 2" :key="2">
          <div class="second-form">
            <el-form-item label="车牌号:" prop="truckNumber" :rules="[
                  {required: true, message:'车牌号不能为空', trigger:['change','blur']},
                  {validator: validator.isPlateNo, trigger:['change','blur']}
                 ]">
                    <el-autocomplete placeholder="请输入车牌号" size="small" @blur.stop="saveLocal($event.target.value,'userName')"  :debounce="0" :fetch-suggestions="queryTruckSearch"   @select="handleTruckSelect($event)" :trigger-on-focus="false" v-model="meterCardForm.truckNumber">
                        <template slot-scope="{ item }">

                          <section class="queryDriverSearch">
                            <section class="name-item">
                              {{ item.truckNumber}}({{ item.axle}})
                            </section>
                            <section>
                            </section>
                          </section>

                          <div></div>
                        </template>
                    </el-autocomplete>
            </el-form-item>
            <el-form-item label="司机电话:" prop="driverPhone" label-width="127px"
                          :rules="[
                  {validator: validator.isMobile, trigger:'blur'}
                 ]"
            >
              <el-input v-model="meterCardForm.driverPhone"></el-input>
            </el-form-item>
          </div>
          <div class="second-form">
            <el-form-item label="司机姓名:" prop="driverName" :rules="[
                  {required: true, message:'司机姓名不能为空', trigger:['change','blur']},
                  {validator: validator.isName, trigger:['change','blur']}
                 ]">
                    <el-autocomplete placeholder="请输入司机姓名" size="small" @blur.stop="saveLocal($event.target.value,'userName')"  :debounce="0" :fetch-suggestions="queryDriverSearch"   @select="handleSelect($event,'2')" :trigger-on-focus="false" v-model="meterCardForm.driverName"
                                     :maxlength=10
                                     show-word-limit>
                        <template slot-scope="{ item }">

                          <section class="querySearch-autocomplete card">
                            <section class="name-item">
                              <section class="name"><span v-if="item.name">{{ item.name.substr(0,1) }}</span></section>
                              {{ item.name}}({{item.phone}})
                            </section>
                            <section class="cardId">({{item.idcard}})</section>
                            <section>
                            </section>
                          </section>

                          <div></div>
                        </template>
                    </el-autocomplete>
            </el-form-item>
            <el-form-item
              label="司机证件号:"
              prop="driverIdcard"
              label-width="127px"
              :rules="[
                  {validator: validator.isCardId, trigger:'blur'}
                 ]"
            >
              <el-input v-model="meterCardForm.driverIdcard"></el-input>
            </el-form-item>
          </div>
<!--          <span class="second-form">-->
<!--            <el-form-item label="车主姓名:" prop="payeeName"  :rules="[-->
<!--                  {required: true, message:'请选择车主', trigger:['change','blur']},-->
<!--                  {validator: validator.isName, trigger:'blur'}-->
<!--                 ]">-->
<!--                    <el-autocomplete placeholder="请输入车主姓名" size="small" @blur.stop="saveLocal($event.target.value,'userName')"  :debounce="0" :fetch-suggestions="querySearch"   @select="handleSelect($event,'1')" :trigger-on-focus="false" v-model="meterCardForm.payeeName">-->
<!--                        <template slot-scope="{ item }">-->

<!--                          <section class="querySearch-autocomplete card">-->
<!--                            <section class="name-item">-->
<!--                              <section class="name"><span v-if="item.value">{{ item.value.substr(0,1) }}</span></section>-->
<!--                              {{ item.value}}({{item.contactPhone}})-->
<!--                            </section>-->
<!--                            <section class="cardId">({{item.idCard}})</section>-->
<!--                            <section>-->
<!--                            </section>-->
<!--                          </section>-->

<!--                          <div></div>-->
<!--                          &lt;!&ndash; <span class="addr">{{ item.address }}</span> &ndash;&gt;-->
<!--                        </template>-->
<!--                    </el-autocomplete>-->
<!--            </el-form-item>-->
<!--            <el-form-item-->
<!--              label="车主证件号:"-->
<!--              label-width="127px"-->
<!--              prop="payeeIdCard"-->
<!--              :rules="[-->
<!--                    {required: true, message:'请输入结算人证件号', trigger:'change'}-->
<!--                   ]"-->
<!--            >-->
<!--              <el-input v-model="meterCardForm.payeeIdCard"></el-input>-->
<!--            </el-form-item>-->
<!--          </span>-->
          <div class="second-form">
            <el-form-item label="应交卡费:"  >
              <el-input v-model="queryForm.cardFee" :disabled="true" v-thousands.cardFee="queryForm"></el-input>
            </el-form-item>
            <el-form-item label="实收卡费:" label-width="127px" prop="payMoney">
              <el-input v-model="meterCardForm.payMoney" v-thousands.payMoney="queryForm"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="备注:" class="note">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="meterCardForm.remark"
              maxlength="50"
              show-word-limit
            >
            </el-input>
          </el-form-item>
        </div>
        <div v-if="meterCardForm.cardUsage === 1" :key="1">
          <div class="second-form">
            <el-form-item label="结算人:" prop="payeeName"  :rules="[
                  {required: true, message:'请选择结算人', trigger:['change','blur']},
                  {validator: validator.isName, trigger:['change','blur']}
                 ]">
                    <el-autocomplete placeholder="请输入结算人姓名" size="small" @blur.stop="saveLocal($event.target.value,'userName')"  :debounce="0" :fetch-suggestions="querySearch"   @select="handleSelect($event,'1')" :trigger-on-focus="false" v-model="meterCardForm.payeeName"
                                     :maxlength=10
                                     show-word-limit
                    >
                        <template slot-scope="{ item }">

                          <section class="querySearch-autocomplete card">
                            <section class="name-item">
                              <section class="name"><span v-if="item.value">{{ item.value.substr(0,1) }}</span></section>
                              {{ item.value}}({{item.contactPhone}})
                              <section class="cardId">({{item.idCard}})</section>
                            </section>
                            <section>
                            </section>
                          </section>

                          <div></div>
                          <!-- <span class="addr">{{ item.address }}</span> -->
                        </template>
                    </el-autocomplete>
            </el-form-item>
            <el-form-item
              label="结算人证件号:"
              label-width="127px"
              prop="payeeIdCard"
              :rules="[
                    {required: true, message:'请输入结算人证件号', trigger:['change','blur']},
                    {validator: validator.isCardId, trigger:'blur'}
                   ]"
            >
              <el-input v-model="meterCardForm.payeeIdCard"></el-input>
            </el-form-item>
          </div>
          <div class="second-form">
          <el-form-item label="应交卡费:"  >
            <el-input v-model="queryForm.cardFee" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="实收卡费:" label-width="127px" prop="payMoney">
            <el-input v-model="meterCardForm.payMoney"></el-input>
          </el-form-item>
        </div>
          <el-form-item label="备注:" class="note">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="meterCardForm.remark"
              maxlength="50"
              show-word-limit
            >
            </el-input> </el-form-item>
        </div>
        <div v-if="meterCardForm.cardUsage === 3" :key="3">
          <el-form-item label="持卡人姓名:" prop="userName"  :rules="[
                  {required: true, message:'请选择持卡人', trigger:['change','blur']},
                  {validator: validator.isName, trigger:['change','blur']}
                 ]">
            <el-autocomplete class="name" placeholder="请输入持卡人姓名" size="small" @blur.stop="saveLocal($event.target.value,'userName')"  :debounce="0" :fetch-suggestions="queryUserSearch"   @select="handleUserSelect($event)" :trigger-on-focus="false" v-model="meterCardForm.userName"
                             :maxlength=10
                             show-word-limit
            >
              <template slot-scope="{ item }">

                <section class="querySearch-autocomplete">
                  <section class="name-item">
                    <section class="name"><span v-if="item.name">{{ item.name.substr(0,1) }}</span></section>
                    {{ item.name}}({{item.phone}})
                  </section>
                </section>

                <div></div>
                <!-- <span class="addr">{{ item.address }}</span> -->
              </template>
            </el-autocomplete>
          </el-form-item>
          <div></div>
          <el-form-item label="备注:" class="note">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="meterCardForm.remark"
              maxlength="50"
              show-word-limit
            >
            </el-input>
          </el-form-item>
        </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
        >确定</el-button
        >
        <el-button size="small" @click="close()">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { send } from '@/api/truck/cardRegiste/cardRegiste.js'
  import { edit, getCardFee, queryById } from '@/api/truck/cardOperate/cardOperate.js'
  import { getSearchlist, getSearchDriverlist, getSearchTrucklist, getSearchUserlist } from '@/api/truck/truckDriver.js'
  export default {
    components: {
    },
    data () {
      return {

        queryForm:{
          cardFee: 0,
        },
        values: [],
        readCardId: '778647235448729600',
        method: '',
        detailsVisible: false,
        title: '',
        resultBean: {},
        meterCardForm: {
          cardNumber: '',
          cardType: '',
          cardTypeValue: '',
          cardStateValue: '',
          truckId: '',
          driverId: '',
          driverPhone: '',
          driverIdcard: '', // 司机证件号
          payMoney: '', // 缴费
          remark: '', // 备注
          truckNumber: '',
          driverName: '',
          payeeName: '',
          payeeIdCard: '',
          payeeId: '',
          cardUsage: 2,
          userId: '',
          userName: '',
          id: ''
        },
        readCardForm: {
          cardNumber: '',
          cardInnerNumber: '',
          cardType: '',
          cardTypeValue: '',
          cardState: '',
          cardStateValue: '',
          id: ''
        },
        editVisible: false,
        dialogVisible: false,
        dataRule: {
        }
      }
    },
    methods: {
    	handleClose(done) {
			this.$Msg.confirm({
				title:'您确定要关闭吗？',
				content:this.GLOBAL.FORM_CLOSE_TIPS,
				confirmCall:()=>{
					done();
				}
			})
		},
      init (method, id) {
        if (method === 'add') {
          this.editVisible = true
          this.$nextTick(() => {
            this.$refs.meterCardForm.resetFields()

            this.meterCardForm.cardNumber= '',
              this.meterCardForm.cardType= '',
              this.meterCardForm.cardTypeValue= '',
              this.meterCardForm.cardStateValue= '',
              this.meterCardForm.truckId= '',
              this.meterCardForm.driverId= '',
              this.meterCardForm.driverPhone= '',
              this.meterCardForm.driverIdcard= '', // 司机证件号
              this.meterCardForm.payMoney= '', // 缴费
              this.meterCardForm.remark= '', // 备注
              this.meterCardForm.truckNumber= '',
              this.meterCardForm.driverName= '',
              this.meterCardForm.payeeName= '',
              this.meterCardForm.payeeIdCard= '',
              this.meterCardForm.payeeId= '',
              this.meterCardForm.cardUsage= 2,
              this.meterCardForm.userId= '',
              this.meterCardForm.userName= '',
              this.meterCardForm.id= ''
            this.readCardForm.cardNumber= '',
              this.readCardForm.cardInnerNumber= '',
              this.readCardForm.cardType= '',
              this.readCardForm.cardTypeValue= '',
              this.readCardForm.cardState= '',
              this.readCardForm.cardStateValue= '',
              this.readCardForm.id= ''
          })
          this.values = []
          this.meterCardForm.id = ''
          this.title = '发卡'
        }
        if (method === 'update') {
          this.editVisible = true
          this.$nextTick(() => {
            this.$refs.meterCardForm.resetFields()
            // this.meterCardForm = {}
          })
          queryById({
            id: id
          }).then((res) => {
            if (res.data.code === '200') {
              this.meterCardForm = res.data.result
              this.readCardForm.cardNumber = res.data.result.cardNumber
              this.readCardForm.cardInnerNumber = res.data.result.cardInnerNumber
              if(res.data.result.register!==undefined){
                this.readCardForm.cardTypeValue = this.$dictUtils.getDictLabel('cardType', res.data.result.register.cardType, '')
                this.readCardForm.cardStateValue = this.$dictUtils.getDictLabel('cardState', res.data.result.register.state, '')
              }
              this.readCardForm.id = res.data.result.cardRegisterId
              if (res.data.result.cardUsage === 1) {
                getCardFee({
                  idCard: this.meterCardForm.payeeIdCard,
                  cardUsage: this.meterCardForm.cardUsage
                }).then((res) => {
                  if (res.data.code === '200') {
                    this.queryForm.cardFee = res.data.result.cardFee
                  }
                })
              } else if (res.data.result.cardUsage === 2) {
                if(res.data.result.driver!==undefined){
                  this.meterCardForm.driverName = res.data.result.driver.name
                  this.meterCardForm.driverPhone = res.data.result.driver.phone
                  this.meterCardForm.driverIdcard = res.data.result.driver.idcard
                }
                getCardFee({
                  idCard: this.meterCardForm.driverIdcard,
                  cardUsage: this.meterCardForm.cardUsage
                }).then((res) => {
                  if (res.data.code === '200') {
                    this.queryForm.cardFee = res.data.result.cardFee
                  }
                })
              } else if (res.data.result.cardUsage === 3) {
                this.meterCardForm.userName = res.data.result.user.name
              }
            }
          })
          this.values = []
          this.title = '发卡'
        }
      },
      close () {
        this.editVisible = false
      },
      clearData () {
        if (this.meterCardForm.cardUsage === 1) { // 结算
          this.meterCardForm.payeeId = ''
          this.meterCardForm.payeeName = ''
          this.meterCardForm.payeeIdCard = ''
          this.meterCardForm.driverPhone = ''
          this.meterCardForm.driverIdcard = ''
          this.meterCardForm.driverName = ''
          this.meterCardForm.driverId = ''
          this.meterCardForm.truckNumber = ''
          this.meterCardForm.truckId = ''
          this.meterCardForm.userId = ''
          this.meterCardForm.userName = ''
          this.queryForm.cardFee = ''
        } else if (this.meterCardForm.cardUsage === 2) { // 计量
          this.meterCardForm.payeeId = ''
          this.meterCardForm.payeeName = ''
          this.meterCardForm.payeeIdCard = ''
          this.meterCardForm.driverPhone = ''
          this.meterCardForm.driverIdcard = ''
          this.meterCardForm.driverName = ''
          this.meterCardForm.driverId = ''
          this.meterCardForm.truckNumber = ''
          this.meterCardForm.truckId = ''
          this.meterCardForm.userId = ''
          this.meterCardForm.userName = ''
          this.queryForm.cardFee = ''
        } else if (this.meterCardForm.cardUsage === 3) { // 取样
          this.meterCardForm.payeeId = ''
          this.meterCardForm.payeeName = ''
          this.meterCardForm.payeeIdCard = ''
          this.meterCardForm.driverPhone = ''
          this.meterCardForm.driverIdcard = ''
          this.meterCardForm.driverName = ''
          this.meterCardForm.driverId = ''
          this.meterCardForm.truckNumber = ''
          this.meterCardForm.truckId = ''
          this.meterCardForm.userId = ''
          this.meterCardForm.userName = ''
          this.queryForm.cardFee = ''
        }
      },
      readCard () {
        send({
          id: this.readCardId
        }).then(({data}) => {
          if (data.code === '200') {
            this.readCardForm = data.result
            this.readCardForm.cardTypeValue = this.$dictUtils.getDictLabel('cardType', this.readCardForm.cardType, '')
            this.readCardForm.cardStateValue = this.$dictUtils.getDictLabel('cardState', this.readCardForm.state, '')
          }
          this.loading = false
        })
      },
      saveLocal (val, filed) {
        // let val2={value:''}
        // val2.value=val
        // this.values.push(val2)
        // this.Es5duplicate(this.values,'value')
      },
      // 输入后匹配输入建议车主
      querySearch (queryString, cb) {
        if (queryString) {
          getSearchlist({
            selectValue: queryString
          }).then((res) => {
            if (res.data.code === '200') {
              this.values = []
              for (let index = 0; index < res.data.result.length; index++) {
                const element = {
                  value: '',
                  contactPhone: '',
                  idCard: '',
                  id: ''
                }
                element.value = res.data.result[index].names
                element.contactPhone = res.data.result[index].contactPhone
                element.idCard = res.data.result[index].idCard
                element.id = res.data.result[index].id
                this.values.push(element)
              }
              cb(this.values)
            }
          })
        }
      },
      // 输入后匹配输入建议司机
      queryDriverSearch (queryString, cb) {
        if (queryString) {
          getSearchDriverlist({
            selectValue: queryString
          }).then((res) => {
            if (res.data.code === '200') {
              console.log(res.data)
              this.values = []
              for (let index = 0; index < res.data.result.length; index++) {
                const elementDriver = {
                  name: '',
                  phone: '',
                  idcard: '',
                  id: ''
                }
                elementDriver.name = res.data.result[index].name
                elementDriver.phone = res.data.result[index].phone
                elementDriver.idcard = res.data.result[index].idcard
                elementDriver.id = res.data.result[index].id
                this.values.push(elementDriver)
              }
              cb(this.values)
            }
          })
        }
      },
      // 车辆
      queryTruckSearch (queryString, cb) {
        if (queryString) {
          getSearchTrucklist({
            selectValue: queryString
          }).then((res) => {
            if (res.data.code === '200') {
              this.values = []
              for (let index = 0; index < res.data.result.length; index++) {
                const elementTruck = {
                  axle: '',
                  truckNumber: '',
                  truckId: ''
                }
                if(res.data.result[index].axle!==undefined){
                  elementTruck.axle = res.data.result[index].axle.axle
                }
                elementTruck.truckNumber = res.data.result[index].truckNumber
                elementTruck.truckId = res.data.result[index].id
                this.values.push(elementTruck)
              }
              cb(this.values)
            }
          })
        }
      },
      handleTruckSelect ($event, item) {
        this.meterCardForm.truckNumber = $event.truckNumber
        this.meterCardForm.truckId = $event.truckId
      },
      // 员工
      queryUserSearch (queryString, cb) {
        if (queryString) {
          getSearchUserlist({
            selectValue: queryString
          }).then((res) => {
            if (res.data.code === '200') {
              this.values = []
              for (let index = 0; index < res.data.result.length; index++) {
                const elementTruck = {
                  phone: '',
                  name: '',
                  userId: ''
                }
                elementTruck.phone = res.data.result[index].phone
                elementTruck.name = res.data.result[index].name
                elementTruck.userId = res.data.result[index].id
                this.values.push(elementTruck)
              }
              cb(this.values)
            }
          })
        }
      },
      handleUserSelect ($event) {
        this.meterCardForm.userName = $event.name
        this.meterCardForm.userId = $event.userId
      },
      handleSelect ($event, item) {
        if (item === '1') {
          this.meterCardForm.payeeId = $event.id
          this.meterCardForm.payeeName = $event.value
          this.meterCardForm.payeeIdCard = $event.idCard
          getCardFee({
            idCard: $event.idCard,
            cardUsage: this.meterCardForm.cardUsage
          }).then((res) => {
            if (res.data.code === '200') {
              this.queryForm.cardFee = res.data.result.cardFee
            }
          })
        } else if (item === '2') {
          this.meterCardForm.driverPhone = $event.phone
          this.meterCardForm.driverIdcard = $event.idcard
          this.meterCardForm.driverName = $event.name
          this.meterCardForm.driverId = $event.id
          getCardFee({
            idCard: $event.idcard,
            cardUsage: this.meterCardForm.cardUsage
          }).then((res) => {
            if (res.data.code === '200') {
              this.queryForm.cardFee = res.data.result.cardFee
            }
          })
        }
      },
      doSubmit () {
        this.$refs['meterCardForm'].validate((valid) => {
          if (valid) {
            this.meterCardForm.cardNumber = this.readCardForm.cardNumber
            this.meterCardForm.cardInnerNumber = this.readCardForm.cardInnerNumber
            this.meterCardForm.state = this.readCardForm.state
            this.meterCardForm.cardRegisterId = this.readCardForm.id
            edit(this.meterCardForm).then(({data}) => {
              if (data.code === '200') {
                this.$message({
                  message: '发卡成功',
                  type: 'success'
                })
                this.editVisible = false
                this.$emit('refreshDataList')
              }
            })
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '@/assets/scss/config.scss';
  .first-form ::v-deep .el-input__inner {
    width: 170px;
  }
  .second-form ::v-deep .el-input__inner {
    width: 246px;
  }
  .queryDriverSearch{
    color: #999999;
    margin-bottom: 5px;
    .name-item{
      display: flex;
    }
    .name{
      width: 28px;
      height: 28px;
      text-align: center;
      background: #EEEEEE;
      line-height: 28px;
      border-radius: 28px;
      margin-right: 5px;
    }

  }
.first-wrapper{
  display: flex;
}
  .readBut {
    width: 126px;
    height: 65px;
    background: $--color-primary-liyu;
    border-radius: 5px;
    margin-top: 10px;
    font-weight: 400;
    margin-left: 28px;
    color: #ffffff;
    text-align: center;
    line-height: 65px;
    cursor:pointer;
    font-size: 26px;
    font-family: Microsoft YaHei;
  }
  .view-container {
    margin-bottom: 20px;
    display: flex;
    .label-container {
      width: 150px;
      text-align: right;
      font-size: 16px;
      font-weight: 400;
      color: #666666;
    }
    .form-container {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      width: 200px;
    }
  }
  .meterCardForm-wrapper{

    ::v-deep.el-dialog .el-dialog__body{
      min-height: 454px;
      padding-left: 34px;
      .el-form{
        .second-form{
          .el-form-item.card-use{
            margin-bottom: 20px !important;
            .el-form-item__content{
              font-size: 16px;
            }
          }

          .el-form-item:nth-child(2){
            margin-left: 15px;
          }

        }
        .el-form-item.note{
          display: flex;
          .el-form-item__content{
            flex: 1;
            .el-textarea__inner{
              width: 634px;
            }
          }
        }
        .name{
          .el-input__inner{
            width: 246px;
          }
        }
      }
    }

  }


</style>
